<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/css/mbContainer.css" title="style"  media="screen"/>
    <link rel="stylesheet" href="${ctx}/resources/css/slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="${ctx}/resources/css/jquery_ui/jquery-ui-1.8.16.custom.css" type="text/css"/>
    
	<script type="text/javascript">
		var __ctxPath="<%=request.getContextPath() %>";
	</script>
    <!-- 
    <script src="${ctx}/resources/js/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
     -->
	    
 <script src="${ctx}/resources/js/slickgrid/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="${ctx}/resources/js/slickgrid/jquery.event.drag-2.0.min.js"></script>

<script src="${ctx}/resources/js/slickgrid/core/slick.core.js"></script>
<script src="${ctx}/resources/js/slickgrid/core/slick.grid.js"></script>

    <script src="${ctx}/resources/js/jquery/ux/jquery.metadata.js" type="text/javascript"></script>
    <script src="${ctx}/resources/js/jquery/ux/mbContainer.js" type="text/javascript"></script>

	 <script type="text/javascript">
        $(function(){

            function openModal(o){
                var $overlay=$("<div/>").attr("id","mb_overlay").css({position:"fixed",width:"100%", height:"100%", top:0, left:0, background:"#000", opacity:.7}).hide();
                $("body").prepend($overlay);
                $overlay.mb_bringToFront();
                o.mb_bringToFront();
                o.mb_centerOnWindow(false);
                $overlay.fadeIn(500);
            }
            function closeModal(o){
                $("#mb_overlay").fadeOut(500,function(){
                	$(this).remove();
                });
            }


            function initDock(o,docID){
                if(o.hasClass("dock")) return;
                var opt= o.get(0).options;
                var docEl=$("<span>").attr("id",o.attr("id")+"_dock").css({width:opt.dockedIconDim+5,display:"inline-block"});
                var icon= $("<img>").attr("src",opt.elementsPath+"icons/"+(o.attr("icon")?o.attr("icon"):"restore.png")).css({opacity:.4,width:opt.dockedIconDim,height:opt.dockedIconDim, cursor:"pointer"});
                icon.click(function(){o.mb_iconize();});
                docEl.append(icon);
                $("#"+docID).append(docEl);
                o.attr("dock",o.attr("id")+"_dock");
            }

            function iconize(o){
                $("#"+o.attr("dock")).find("img:first").hide();
            }
            function restore(o){
                $("#"+o.attr("dock")).find("img:first").show();
            }
            function close(o){
                $("#"+o.attr("dock")).find("img:first").hide();
                $("#open").fadeIn();
            }


            $(".containerPlus").not("#modalContainer").buildContainers({
                containment:"document",
                elementsPath:__ctxPath+"/resources/elements/",
                dockedIconDim:58,
                onCreate:function(o){initDock(o,"dock");},
                onClose:function(o){close(o);},
                onRestore:function(o){restore(o);},
                onIconize:function(o){iconize(o);},
                onLoad:function(o){},//o.mb_centerOnWindow(false);
                effectDuration:300
            });

            $("#modalContainer").buildContainers({
                containment:"document",
                elementsPath:__ctxPath+"/resources/elements/",
                dockedIconDim:58,
                onCreate:function(o){},
                onClose:function(o){closeModal(o);},
                onRestore:function(o){openModal(o);},
                onIconize:function(o){},
                effectDuration:300
            });
        });

    </script>
    


<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  });
</script>
  </head>
  
  <body >
  	<div id="c1" class="containerPlus draggable resizable {buttons:'m,i,c', icon:'1077453.png',skin:'black', width:'500',iconized:'true', dock:'dock', title:'container 1', rememberMe:true}" style="position:fixed;top:130px;left:400px">
        <!-- 
         <div class="evidence">
            <h3>Container 1 with dock placeholder!</h3>
            <p>Loock at the code to see how to make a dock placeholder</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
        <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
         -->
         <div id="myGrid" style="width:600px;height:500px;"></div>
    </div>
    
     <div id="c2" class="containerPlus draggable resizable {buttons:'m,i,c', icon:'1077465.png', skin:'white', width:'500',iconized:'true', dock:'dock', title:'container 2'}" style="position:fixed;top:181px;left:54px">
        <div class="evidence">
            <h3>Container 2 with dock placeholder!</h3>
            <p>to preiconize containers just add the param <span style="font-weight: bold;">iconized:'true'</span></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
        <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
    </div>

    <div id="c3" class="containerPlus draggable resizable {buttons:'m,i,c', icon:'1077469.png', skin:'default', width:'500',iconized:'true', dock:'dock', title:'container 3'}" style="position:fixed;top:500px;left:700px">
        <div class="evidence">
            <h3>Container 3 with dock placeholder!</h3>
            <p>to preiconize containers just add the param <span style="font-weight: bold;">iconized:'true'</span></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
        <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
    </div>

    <div class="containerPlus draggable resizable {buttons:'m,i,c', skin:'default', width:'500', dock:'dock', title:'container 4'}" style="position:fixed;top:100px;left:600px">
        <div class="evidence">
            <h3>Container 4 with dock placeholder!</h3>
            <p>to preiconize containers just add the param <span style="font-weight: bold;">iconized:'true'</span></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
        <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
    </div>

    <div id="modalContainer" class="containerPlus {buttons:'c', skin:'white', width:'500', height:'450', closed:'true', title:'container 4'}" style="position:fixed;top:100px;left:600px">
        <div class="evidence">
            <h3>Container 4 with dock placeholder!</h3>
            <p>to preiconize containers just add the param <span style="font-weight: bold;">iconized:'true'</span></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
        <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
        <div style="text-align:right; width:100%; margin-top:20px;"><button id="close" onclick="$('#modalContainer').mb_close();">close</button></div>
        <br>
    </div>
    
    <div id="out_dock">
	     <div id="dock">
	     </div>
    </div>
    <button id="open" onclick="$('.containerPlus').mb_open(); $(this).fadeOut();" style="display:none;">open closed containers </button><br>
    <button id="openModal" onclick="$('.containerPlus').mb_open();">open modal </button>
    
    <form method="get" action="/search" id="search">
	  <input name="q" type="text" size="40" placeholder="Search..." />
	</form>
    
  </body>
</html>
